<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
<template>
	 
	<view class="page">
		
		
	<view class="tabs-label">
		<view :class="[tab1==true?'call-2-label':'call-1-label']" @click="tab1Method">
			<label>全部</label>
		</view>
		<view :class="[tab2==true?'call-2-label':'call-1-label']" @click="tab2Method">
			<label>预售</label>
		</view>
		<view :class="[tab3==true?'call-2-label':'call-1-label']" @click="tab3Method">
			<label>现货</label>
		</view>
	</view>
	
	 <view  class="swiperTitle"  @click="goToPage('/pages/tabbar/tabbar-1/search/search?tab=2')">
			<input class="swiperTitle-input" placeholder="请尝试输入想找的货源"/>
			<label class="swiperTitle-lable">搜索</label>
	 </view>
 
	 <view class="call">
	 	<label>商机：{{notices[0]}}</label>
	 </view>
	
	</view>
	
	<view>
		<scroll-view class="scroll-view-H"  scroll-y="true" :scroll-top="scrollTop" @scroll="scroll" @scrolltoupper="upper"
		 @scrolltolower="lower">
		 <fy-dropdown :menuList="menuList">
		 	<fy-dropdown-item v-model="priceValue" dropdownKey="price" :options="priceOptions"  type="column" @change="handlerPriceChange"></fy-dropdown-item>
		 	<fy-dropdown-item v-model="salesValue" dropdownKey="sales" :options="salesOptions" type="column"  @change="handlerSaleChange"></fy-dropdown-item>
		 	<fy-dropdown-item v-model="timeValue" dropdownKey="time" :options="timeOptions"  type="column" @change="handlerTimeChange"></fy-dropdown-item>
		 	<fy-dropdown-item v-model="synthesisValue" dropdownKey="synthesis" :options="columnOptions" type="column" @change="handlerColumnChange"></fy-dropdown-item>
		 </fy-dropdown>
		 
			<view class="center" v-for="(item, index) in list" :key="item.id">
		 
				<view class="images"  @click="goToDetail(item.id)">
					<view class="wrap">
						
						<image class="icon-image" :src="item.resourceIds[0]"/>
						<view class="mark">
							<view class="text">共{{item.resourceIds.length}}张</view>
						</view>
						<view class="mark2">
							<view :class="[item.purchase == '1'?'text2-0':'text2']">{{item.purchase == '0' ? "现货" : "预售"}}</view>
						</view>
					</view>
				</view>
				<view class="scroll-view_H-tab3"  @click="goToDetail(item.id)">
					<view class="">
						 <view class="call-row1">
							<label class="call-select-title">{{item.shopName}}</label>
						 	<view class="call-select-img">
								<image v-if="item.like" src="../../../static/img/收藏2.png" @click="likeClick(item)"/>
								<image v-else src="../../../static/img/收藏0.png" @click="likeClick(item)"/>
							</view>
						 </view>
						 <view class="call-row2-1">
						 	<label class="call-select2-title">{{item.address}}</label>
							<label class="call-select2-txt">收藏</label>
						 </view>
						 <view class="call-row2">
						 	  <view  class="call-select3-title">{{item.shopUserType}}</view>
							<view class="call-select3-txt">协助找车</view>
						 </view>
						 
						 <view class="call-row4">
						 	<view  class="call-select4-title">{{item.purchasePrice}} {{item.purchasePriceUnit}}</view>
						 	<view class="call-select2-txt">{{item.purchaseStartDayStr}}</view>
						 </view>
						 <view class="call-row2">
						 	<label class="call-select5-title">简介：{{item.shopDescription}}</label>
						 </view>
					</view>
				</view>
			</view>
		 
		</scroll-view>
		 
	</view>
	<view class="loadingText">{{loadingText}}</view>
	<view class="bootom_right" @click="switchTab('/pages/tabbar/tabbar-1/tabbar-1')">回首页</view>
	    
</template>

<script>
import utils from '@/utils/requset.js'
import operate from '@/common/operate.js'
export default {
    data() {
        return {
			
			menuList: [ 
				{ title: '价格', dropdownKey: 'price' }, 
				{ title: '起批量', dropdownKey: 'sales' },
				{ title: '发布时间', dropdownKey: 'time' },
				{ title: '产地', dropdownKey: 'synthesis' }],
			synthesisValue: '',
			columnOptions: [
				{ title: '产地', key: 'type', default: '0',content:'', 
						list: [
							{ text: '全国', value: '0' },
							{ text: '北京市', value: '11' }, 
							{ text: '天津市', value: '12' }, 
							{ text: '河北省', value: '13' }, 
							{ text: '山西省', value: '14' }, 
							{ text: '辽宁省', value: '21' }, 
							{ text: '吉林省', value: '22' }, 
							{ text: '黑龙江省', value: '23' }, 
							 { text: '上海市', value: '31' }, 
							 { text: '江苏省', value: '32' }, 
							 { text: '浙江省', value: '33' }, 
							 { text: '安徽省', value: '34' }, 
							 { text: '福建省', value: '35' }, 
							 { text: '江西省', value: '36' }, 
							 { text: '山东省', value: '37' }, 
							 { text: '河南省', value: '41' }, 
							 { text: '湖北省', value: '42' }, 
							 { text: '湖南省', value: '43' }, 
							 { text: '广东省', value: '44' },
							 { text: '海南省', value: '46' },
							 { text: '重庆市', value: '50' }, 
							 { text: '四川省', value: '51' },
							 { text: '贵州省', value: '52' },
							 { text: '云南省', value: '53' }, 
							 
							 { text: '陕西省', value: '61' }, 
							 { text: '甘肃省', value: '62' }, 
							 { text: '青海省', value: '63' },
							 { text: '西藏自治区', value: '54' }, 
							 { text: '宁夏回族自治区', value: '64' },
							 { text: '新疆维吾尔自治区', value: '65' }, 
							 { text: '广西壮族自治区', value: '45' },
							 { text: '内蒙古自治区', value: '15' }, 
							 { text: '其他', value: '66' },
							] 
				},
				
			],
			priceValue: '',
			priceOptions: [
				{ title: '价格', key: 'status', default: '0', content:'', 
						list: [
							
							{ text: '价低到高', value: '1' }, 
							{ text: '价高到低', value: '2' },
							] ,
				}
			],
			salesValue: '',
			salesOptions: [
				{ title: '采购量', key: 'status', default: '0', content:'', 
						list: [
							
							{ text: '量小到大', value: '1' }, 
							{ text: '量大到小', value: '2' },
							] ,
				}
			],
			
			timeValue: '',
			timeOptions: [
				{ title: '发布时间', key: 'status', default: '0', content:'', 
						list: [
							{ text: '时间正序', value: '1' }, 
							{ text: '时间倒序', value: '2' },
							] ,
				}
			],
			
            indicatorDots: true,
            autoplay: false,
            interval: 2000,
            duration: 500,
			tab1:false,
			tab2:true,
			tab3:true,
		 
			list: [],
			orders:[],
			notices:[],
			searchKey:"",
			page: {
				purchase:null,
				current: 0,
				size: 10,
				total: 0,
				select0:"",
				select1:"",
				select2:"",
				select3:"",
			},
			loadingText: '-- 暂无更多 --',
        }
    },
	onLoad() {
		this.page.current = 1;
		this.getPreShopListByPage();
		this.getNotice();
	},
			 
	onPullDownRefresh() {
		this.page.current = 1
		this.getPreShopListByPage()
	},
	onReachBottom() {
		this.getMoreList();
	},
	
    methods: {
		goToDetail(id) {
			let url = "/pages/tabbar/tabbar-2/tabbar-2-details/tabbar-2-details?id="+id;
			uni.navigateTo({
				url
			});
		},
		
		getValue(value){
		   this.searchKey = value;
		   this.page.current = 1;
		   this.list = [];
		   this.getPreShopListByPage();
		},
		
		getMoreList() {
				console.log("getMore")
				this.loadingText = '-- 正在加载 --'
				this.getPreShopListByPage()
				this.page.current++;
			 
		},
		getNotice(userId){
			// 请求参数
			var header = {},
				data = {
					userId:userId
				},
				url = "/purchase/preShop/notice", 
				method = "POST";
			if (method) {
				method = method.toUpperCase(); 
				if (method == "POST") {
					header = {
					   'Content-Type': "application/json"
					};
				} else {
					header = {
						'Content-Type': "application/json"
					};
				}	
			}
						 
			 uni.request({
				url: operate.api + url,		
				data: data,
				method: method,
				header: header,
				success: (res) => {
					console.log(res)
					if(res.statusCode && res.statusCode ==200){
						 
						if(res.data.data){
							var notices = res.data.data.notices;
							this.notices = notices;
							var orders = res.data.data.orders;
							this.orders = orders;
						} 
					}else{
						console.log("数据状态码！=200")
					}
					
				},fail(res2) {
					 
				},complete() {
					 
				}
			})
		},
		
	 
	 /**
	  * 分页请求
	  */
		getPreShopListByPage : function() {
			uni.showLoading({
				title: '加载中',
				duration:2000
			});
			//this.page.userId = getApp().globalData.userInfo.id
			this.page.shopName = this.searchKey
			
			if(!this.tab1){
				
			}else if(!this.tab2){
				this.page.purchase = 1
			}else{
				this.page.purchase = 0
			}
			console.log(this.page.purchase)
			// 请求参数
			var header = {},
				data = this.page,
				url = "/purchase/preShop/listByPage", 
				method = "POST";
			if (method) {
				method = method.toUpperCase(); 
				if (method == "POST") {
					header = {
					   'Content-Type': "application/json"
					};
				} else {
					header = {
						'Content-Type': "application/json"
					};
				}
			}
		 
			 uni.request({
				url: operate.api + url,		
				data: data,
				method: method,
				header: header,
				success: (res) => {
					if(res.statusCode && res.statusCode ==200){
						console.log(res)
						if(res.data.data){
							var newlist = res.data.data.records;
							if(newlist.length == 0){
								this.loadingText = '-- 暂无更多 --'
							}else{
								this.list = this.list.concat(newlist)
								uni.stopPullDownRefresh()
								this.page.current++;
							}
							 
						}else{
							console.log("load2")
						}
						 
						
					}else{
						console.log("数据状态码！=200")
					}
					
				},fail(res2) {
					return res2;
				},complete() {
					setTimeout(function () {
						uni.hideLoading();
					}, 1000);
				}
			})
	},
	
	goToPage(url) {
		if (!url) return;
		uni.navigateTo({
			url
		});
	},
	switchTab(url) {
		if (!url) return;
		uni.switchTab({
			url
		});
	},
	tab1Method(){
		console.log(1);
		this.tab1=!this.tab1;
		this.tab2 = true;
		this.tab3 = true;
	},
	tab2Method(){
		console.log(1);
		this.tab2=!this.tab2;
		this.tab1 = true;
		this.tab3 = true;
		this.page.current = 1;
		this.list = [];
		this.getPreShopListByPage(); 
	},
	tab3Method(){
		console.log(1);
		this.tab3=!this.tab3;
		this.tab2 = true;
		this.tab1 = true;
		this.page.current = 1;
		this.list = [];
		this.getPreShopListByPage(); 
	},
	
	
	/**
	 * 筛选
	 */
	handlerColumnChange(e) {
			if (e.cancel) return;
			
			this.columnOptions.forEach(item=>{
				item.default = e.data[item.key];
				this.synthesisValue +=e.data[item.key]+","
			})
			this.menuList[3].title = ""
			this.columnOptions.forEach(item=>{
				item.list.forEach(listItem=>{
					if(item.default == listItem.value){
						this.menuList[3].title += listItem.text +" "
					}
				})
			})
			
			 this.page.current = 1;
			 this.list = [];
			 this.page.select3 = this.menuList[3].title;
			 this.getPreShopListByPage(); 
			
		},
		handlerSaleChange(e) {
			if (e.cancel) return;
			
			this.salesOptions.forEach(item=>{
				item.default = e.data[item.key];
			})
			this.menuList[1].title = ""
			this.salesOptions.forEach(item=>{
				item.list.forEach(listItem=>{
					if(item.default == listItem.value){
						this.menuList[1].title += listItem.text 
					}
				})
			})
			this.page.current = 1;
			 this.list = [];
			this.page.select1 = this.menuList[1].title;
			this.getPreShopListByPage();
			 
		},
		handlerPriceChange(e) {
			
			if (e.cancel) return;
			
			this.priceOptions.forEach(item=>{
				item.default = e.data[item.key];
			})
			this.menuList[0].title = ""
			this.priceOptions.forEach(item=>{
				item.list.forEach(listItem=>{
					if(item.default == listItem.value){
						this.menuList[0].title += listItem.text 
					}
				})
			})
			
			this.page.current = 1;
			 this.list = [];
			this.page.select0 = this.menuList[0].title;
			this.getPreShopListByPage();
		},
	
		handlerTimeChange(e) {
			
			if (e.cancel) return;
			
			this.timeOptions.forEach(item=>{
				item.default = e.data[item.key];
			})
			this.menuList[2].title = ""
			this.timeOptions.forEach(item=>{
				item.list.forEach(listItem=>{
					if(item.default == listItem.value){
						this.menuList[2].title += listItem.text 
					}
				})
			})
			this.page.current = 1;
			 this.list = [];
			this.page.select2 = this.menuList[2].title;
			this.getPreShopListByPage();
		 
		},
	/**
	 * 转评赞藏
	 */
	likeClick(e){
		// 操作类型： 0:顶  1：赞 2：评论 3：转发 4：收藏 5:举报
		// type 0:预购单   1:预售单
	 
		//请求
		// 请求参数
		console.log(e.id)
		var header = {},
			data = {
				preUserIdTarget : getApp().globalData.userInfo.id,
				preOrderId: e.id,
				pubUserIdTarget : e.preUser.id,
				operateType : 4,
				type : 1,
			},
			url = "/purchase/shopOrOrderMyLike/saveOrUpdate", 
			method = "POST";
		if (method) {
			method = method.toUpperCase(); 
			if (method == "POST") {
				header = {
				   'Content-Type': "application/json"
				};
			} else {
				header = {
					'Content-Type': "application/json"
				};
			}
		}
					 
		 uni.request({
			url: operate.api + url,		
			data: data,
			method: method,
			header: header,
			success: (res) => {
				if(res.statusCode && res.statusCode ==200){
					console.log(res)
					this.list.forEach(item=>{
						if(item.id == e.id){
							item.like =1
						}
					})
				}else{
					console.log("数据状态码！=200")
				}
				
			}
		})
	},
		
	
	
	changeIndicatorDots(e) {
		this.indicatorDots = !this.indicatorDots
	},
	changeAutoplay(e) {
		this.autoplay = !this.autoplay
	},
	intervalChange(e) {
		this.interval = e.target.value
	},
	durationChange(e) {
		this.duration = e.target.value
	}
    }
}
</script>


<style>
	
	.loadingText {
		margin-top: 5px;
		height: 25px;
		line-height: 25px;
		font-size: 10px;
		color: #aaaaaa;
		text-align: center;
	}
	 
	.scroll-view-H{
		background-color: rgba(243, 247, 250, 1);
	}
	.bootom_right {
		position: fixed;
		display: flex;
		flex-direction: column;
		right: 0px;
		bottom: 150px;
		z-index: 10;
		padding: 3px;
		padding-left: 10px;
		border-radius: 3px;
		border: 1px solid #ddd;
		background: #fff;
		width: 20px;
		height: 70px;
		background-color: #D43030;
		border-radius: 25px 5px 5px 25px;
		color: #FFF;
		line-height: 22px;
	}
 

	  .mark {
	    position: absolute;
	    right: 50px;
	    bottom: 35px;
	    margin: 0;
	  }
	 
	  .mark:before {
	    content: "";
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 50px;
	    z-index: 1;
		height: 24px;
	    background-color: rgba(206, 3, 5, .7);
		border-radius: 5px;
	  }
	 
	  .text {
	    color: #FFF;
	    display: inline-block;
	    position: absolute;
	    left: 0;
		line-height: 24px;
	    z-index: 1;
	    font-size: 10px;
	    width: 50px;
	    text-align: center;
	  }
	  
	  
	  
	  .mark2 {
	    position: absolute;
	    top: 5px;
	    left: 0;
	    margin: 0;
	  }
	  	 
	  .mark2:before {
	    content: "";
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 35px;
	    z-index: 1;
	  	height: 18px;
		font-weight: bold;
		line-height: 13px;
		 
		color: rgba(255, 255, 255, 1);
		background-color: #43CF7C;
	  	border-radius: 5px 25px 25px 5px;
	  }
	  
	  .text2 {
	    color: #FFF;
	    display: inline-block;
	    position: absolute;
	    left: 0;
	  	line-height: 13px;
	    z-index: 1;
	    font-size: 13px;
	    width: 30px;
		padding: 2px;
	    text-align: center;
	  }
	  .text2-0 {
	    color: #FFF;
	    display: inline-block;
	    position: absolute;
	    left: 0;
	  	line-height: 13px;
	    z-index: 1;
	    font-size: 13px;
	    width: 30px;
	  		padding: 2px;
	    text-align: center;
		background-color: #D43030;
	  } 
 
    .call-row1{
    	display: flex;
		height: 26px;
    }
	.call-row2{
		margin-top: 5px;
		display: flex;
		height: 13px;
	}
	.call-row2-1{
		 
		display: flex;
		height: 13px;
	}
	.call-row4{
		margin-top: 5px;
		display: flex;
		height: 26px;
	}
 
	.call-select-title{
		flex: 1;
		font-size: 13px;
		line-height: 20px;
		color: rgba(42, 47, 51, 1);
		font-weight: bold;
	}
	
	.call-select4-title{
		padding: 2px;
		flex: 1;
		font-size: 13px;
		line-height: 26px;
		color:rgba(254, 141, 32, 1);
		font-weight: bold;
	}
	.call-select-txt{
		flex: 1;
		line-height:  26px;
		margin: 2px;
		color: rgba(140, 151, 157, 1);
		text-align: right;
	}
	.call-select-img{
		flex: 1;
		text-align: right;
	}
	
	
	.call-select2-title{
		flex: 1.5;
		font-size: 12px;
		color: rgba(140, 151, 157, 1);
		text-align: left;
	}
	.call-select2-txt{
		flex: 0.5;
		font-size: 12px;
		color: rgba(140, 151, 157, 1);
		text-align: right;
	}
	.call-select5-title{
		flex: 1.5;
		font-size: 12px;
		color: rgba(140, 151, 157, 1);
		text-align: left;
		white-space: nowrap;
		text-overflow:ellipsis;
	}
	 .call-select3-title{
		background: rgba(243, 247, 250, 1);
		height: 14px;
		border-radius: 5px;
		width: 60px;
	 	font-size: 14px;
		line-height: 14px;
	 	color: rgba(0, 178, 255, 1);
		text-align: left;
		padding: 3px;
	 }
	 .call-select3-txt{
		background: rgba(243, 247, 250, 1);
		height: 14px;
		border-radius: 5px;
		width: 60px;
		font-size: 14px;
		line-height: 14px;
		color: rgba(0, 178, 255, 1);
		text-align: left;
		padding: 3px;
	 }
	
	.scroll-view_H-tab3{
		padding-top: 4px;
		flex: 1;
		margin-left: 10px;
		margin-right: 10px;
		
	}
	 
	.scroll-view_H-tab3 image{
		height: 26px;
		width: 26px;
		
	}
	
	
	.aa{
        transition: all 1s;
    }
    .go{
        transform:rotate(-180deg);
        transition: all 1s;
    }
	.call-select2{
		margin-right: 10px;
		font-size: 13px;
	}
	 
	.scroll-view_H-tab3-call-3-label-1{
		display: flex;
		width: 100%;
		margin-left: 10px;
		margin-right: 10px;
	}
	 

	.type-image-name{
		width: 50px;
		display: flex;
		text-align: left;
		justify-content: center;
		flex-direction: column;
		font-weight: bold;
		
	
	}
	.type-image-name2{
 
		flex: 4;
		display: flex;
		text-align: right;
		justify-content: center;
		flex-direction: column;
		margin-right: 10px;
		color: rgba(204, 204, 204, 1);
	
	}
	 
	.call-times{
		flex: 2;
		display: flex;
		text-align: left;
		justify-content: center;
		flex-direction: column;
		color: rgba(204, 204, 204, 1);
	}
 
 
	 
	 .center {
		height: 120px;
		margin-bottom: 10px;
		margin-left: 10px;
		margin-right: 10px;
		margin-top: 10px;
		 
		display: flex;
		background-color: #FFF;
		border-radius: 5px 5px 5px 5px;
	}
	 
	 
	 
	.page{
		width: 100%;
		font-size: 13px;
		font-weight: 400;
		letter-spacing: 0px;
		line-height: 20px;
		 
	 }
 
	.tabs{
		height: 96px;
		text-align: center;
		margin-left: 20px;
		margin-right: 20px;
		display: flex;
		z-index: 9;
	}
	.tabs-label{
		text-align: center;
		margin-left: 20px;
		margin-right: 20px;
		margin-top: 15px;
		height: 30px;
		display: flex;
		font-weight: bold;
		margin-left: 30%;
		margin-right: 30%;
	}
	.tab{
		flex: 1;
		text-align: center;
		background-color: white;

	}
	.tab2{
		flex: 1;
		text-align: center;
		background-color: white;
		 border-radius: 5px 0px 0px 5px;
	 
	}
	

	.scroll-view_H-tab2{
		flex: 1;
		text-align: center;
		background-color: white;
		 border-radius: 5px 0px 0px 5px;
 
	}
	.scroll-view_H-tab2 image{
		border-radius: 5px 5px 5px 5px;
		height: 120px;
		width: 130px;
		margin-top:10px;
	}


	 
	.tab3{
		flex: 1;
		text-align: center;
		background-color: white;
		border-radius: 0px 5px 5px 0px;
	 
	}
	.tab image{
		border-radius: 5px 5px 5px 5px;
		height: 50px;
		width: 50px;
		margin-top:10px;
	}
	 .tab label{
		color: black;
	 	height: 10px;
	 	width: 50px;
	 }
	 
	 
	 .tab2 image{
	 	border-radius: 5px 5px 5px 5px;
	 	height: 50px;
	 	width: 50px;
	 	margin-top:10px;
	 }
	.tab3 image{
		border-radius: 5px 5px 5px 5px;
		height: 50px;
		width: 50px;
		margin-top:10px;
	}
	.content{
		display: flex;
	}
	 
	 
	 .uni-margin-wrap{
		 
		width: 100%;
		height: 200px;
			 
	 }
	 
	 
	.swiper{
		height: 200px;
		width: 100%;
		text-align: center;
			 
	}
	.swiperItem uni-image{
		width: 100%;
	}
	
	
	 .swiperTitle{
		margin: 10px;
	 }
	 .swiperTitle-lable{
		color: rgba(255, 255, 255, 1);
		background-color: rgba(67, 207, 124, 1);;
		text-align: center;
		flex: 1.5;
		border-radius: 15px;
		height: 30px;
		line-height: 30px;
	 
	 
	 }
	 
	 .swiperTitle-input {
		padding-left: 10px;
		height: 34px;
		line-height: 34px;
	 	opacity: 0.6;
	 	border-radius: 15px;
	 	background: rgba(255, 255, 255, 1);
		color:black;
		flex: 9.5;
	 
		 
	 }
	 
	 .input-placeholder{
		font-size: 11px;
		font-weight: 400;
		letter-spacing: 0px;
		line-height: 16px;
	 
		text-align: left;
	 }
  
	.call{
		background-color: bisque;
		padding-left: 10px;
		border-radius: 5px;
		margin-top: 20px;
		margin-left: 10px;
		margin-right: 10px;
		
	}
	.call-1{
		display: flex;
		margin-left: 20px;
		margin-right: 20px;
		margin-top: 10px;
		width: 50%;
	}
	.call-1-label{
		flex: 1;
		font-size: 16px;
		font-weight: 400;
		letter-spacing: 0px;
		line-height: 20px;
		 
		 
	} 
	.call-1-label uni-label{
		font-weight: bold;
		color: #D43030;
	}
	.call-11-label{
		flex: 1;
		font-size: 16px;
		font-weight: 400;
		letter-spacing: 0px;
		line-height: 20px;
		 
		 
	} 
	.call-11-label uni-label{
		font-weight: bold;
		color: #43CF7C;
	}
	.call-1-label image{
		height: 12px;
		width: 12px;
		text-align: center;
		margin-left: 5px;
	}
	.call-2-label{
		flex: 1;
		font-weight: bold;
		text-align: center;
	} 
	.call-2-label image{
		height: 12px;
		width: 12px;
		text-align: center;
		margin-left: 5px;
	}
	.call-3-label{
		flex: 1;
		font-weight: bold;
	}
	 .call-3-label image{
	 	height: 12px;
	 	width: 10px;
	 	text-align: center;
	 	margin-left: 5px;
	 }
	 
	.call-select{
		display: flex;
		margin-top: 15px;
		margin-bottom: 10px;
	}
	.call-1-label{
		flex: 1;
		font-size: 16px;
		font-weight: 400;
		letter-spacing: 0px;
		margin-right: 10px;
		line-height: 20px;
		color: rgba(0, 0, 0, 1);
		text-align: center;
	} 
 
	.call-3-label{
		flex: 1;
	}
	
	
	
	.swiperTitle{
			height: 32px;
			line-height: 32px;
			display: flex; 
			top: 10px;
			right: 15px;
			left: 15px;
	
	}
	.swiperTitle-lable{
			color: rgba(255, 255, 255, 1);
			background-color: rgba(67, 207, 124, 1);;
			text-align: center;
			flex: 1.5;
			border-radius: 5px;
			height: 30px;
			line-height: 30px;
			margin-top: 2px;
			z-index: 1;
	}
	
	.swiperTitle-input {
			padding-left: 10px;
			height: 34px;
			line-height: 34px;
		border-radius: 5px;
		background: #eee;
			color:black;
			flex: 9.5;
			margin-right: -60px;
			 
	}
	
 .images{
 	text-align: center;
 	background-color: white;
 	border-radius: 5px 0px 0px 5px;
	padding-top: 4px;
 	flex: 0.5;
	position: relative;
 	
 }

 
 
 
 .icon-image{
	 
 	border-radius: 5px 5px 5px 5px;
 	flex: 2;
 	text-align: left;
 	justify-content: center;
 	flex-direction: column;
 	font-weight: bold;
 	width:100%;
 	height: 110px;
  
 }
  
 
</style>
